<template>
	<view class="content">
		<view class="gradient-bg">
			<!-- 渐变背景 -->
			<view class="list-card-wrap">
				<view class="flex-row-between" style="margin-bottom: 8rpx;">
					<view class="flex-row">
						<text class="white-text font-24">任务编号</text>
						<text class="white-text font-24" style="margin-left: 20rpx;">{{form.no}}</text>
					</view>
					<view class="tag tag-gray">{{getDict(form.checkWay, checkWayList)}}</view>
				</view>
				
				<view v-if="form.checkWay == 'LOCATION'" class="s-input-wrap" style="margin: 16rpx 0; border-radius: 8rpx;">
					<view class="s-input-box flex-row-between">
						<text class="gray-text">仓库</text>
						<text class="black-text">{{form.storehouseNo}}</text>
					</view>
					<view class="s-input-box flex-row-between">
						<text class="gray-text">库位</text>
						<text class="black-text">{{form.locationNo}}</text>
					</view>
				</view>
				
				<view v-if="form.checkWay == 'PRODUCT'" class="s-input-wrap" style="margin: 16rpx 0; border-radius: 8rpx;">
					<view class="s-input-box flex-row-between">
						<text class="gray-text">物料编号</text>
						<text class="black-text">{{form.productNo}}</text>
					</view>
					<view class="s-input-box flex-row-between">
						<text class="gray-text">物料名称</text>
						<text class="black-text">{{form.productName}}</text>
					</view>
				</view>
			</view>
			
			<view class="s-input-wrap">
				<!-- <view class="s-input-box flex-row">
					<text class="black-text">库位</text>
					<input v-model="storehouseLocationNo" class="s-input flex1" placeholder="扫描 / 输入库位" @confirm="setLocationNo"/>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view> -->
				<view class="s-input-box flex-row">
					<text class="black-text">条码</text>
					<input v-model="barCode" class="s-input flex1" placeholder="扫描 / 输入条码" @confirm="setBarcode"/>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view>
			</view>
		</view>
		
		<scroll-view class="content-list-card" scroll-y style="height: calc(100vh - 612rpx);">
			<view class="card" v-for="(item,index) in tableList" :key="index" >
				<view class="title flex-row-between">
					<view class="flex-row">
						<text class="gray-text">条码</text>
						<text class="black-text-34" style="margin-left: 8rpx;">{{item.barcode}}</text>
					</view>
					<!-- <image class="s-input-icon" src="/static/images/delete.png"></image> -->
					<uni-icons type="trash-filled" size="20" color="#8997A8" @click="deleteItem(index)"></uni-icons>
				</view>
				<view class="flex-row">
					<view class="content flex1 flex-column">
							<text class="gray-text">物料</text>
							<text class="black-text-34">{{item.productName}}</text>
					</view>
					<view v-if="form.checkType == 'SHOW'" class="content flex1 flex-column">
							<text class="gray-text">库存数量</text>
							<text class="black-text-34">{{item.quantity}}</text>
					</view>
					<view class="content flex1 flex-column">
						<text class="gray-text">数量</text>
						<view class="flex-row content-input">
							<input @input="setNum($event,item)" v-model="item.qty" type="number" class="blue-text font-34 flex1" placeholder="" />
							<image class="edit-icon" src="/static/images/edit.png"></image>
							<!-- <uni-icons class="flex1" type="compose" size="18" color="#458B9C"></uni-icons> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="content-list-total flex-row-between">
			<text class="gray-text">合计:</text>
			<view class="flex-row">
				<text class="gray-text">扫描<text class="blue-text font-38">{{tableList.length}}</text>次,当前码货共<text class="blue-text font-38">{{currPickingQty}}</text>件</text>
				<!-- <view class="botton" @click="confirm">确认</view> -->
				<view class="botton p-botton" @click="complete">完成</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	import { getDict, validNum } from "@/utils/common"
	import {
		checkResult,
		finish,
		infoByBarcode
	} from "./api"
	import {
		infoByLocationNo
	} from "@/api/common.js"
	
	export default {
		data(){
			return{
				storehouseLocationNo:'',
				barCode:'',
				barCodeInfo:{},
				number: 12,
				form:{
					id:'',
					no:'',
				},
				tableList:[],
				checkWayList:[],
				getDict
			}
		},
		computed:{
			currPickingQty:function(){
				let qty = 0
				this.tableList.forEach(item=>{
					qty += parseFloat(item.qty) 
				})
				return qty || 0
			},
		},
		
		onLoad(option){
			this.form = {...this.form,...JSON.parse(decodeURIComponent(option.form))};
			// 获取盘点方式字典
			this.getDicts("storehouse_check_way").then(res => {
			    this.checkWayList = res.data;
			});
			console.log(this.form)
		},
		methods:{
			// 数量校验
			setNum(e,item){
				this.$nextTick(()=>{
					item.qty = validNum(e)
				})
			},
			// 删除入库记录
			deleteItem(index){
				this.tableList.splice(index,1)
			},
			// 计算总码货件数
			calcPickingQty(){
				let qty = 0
				this.tableList.forEach(item=>{
					qty += parseFloat(item.qty) 
				})
				return qty || 0
			},
			// 获取物料信息
			setBarcode(event){
				infoByBarcode(event.detail.value).then(res=>{
					if(res.code == 200){
						// if(res.data.status != "NORMAL"){
						// 	this.$modal.msg(`当前条码被锁定/冻结`);
						// 	this.barCode = ''
						// 	return
						// }
						this.barCode = res.data.barcode
						this.barCodeInfo = res.data
						if(this.form.checkWay == 'PRODUCT' && this.barCodeInfo.productNo !== this.form.productNo){
							this.$modal.msg('该物料与盘点物料不符')
							return
						}
						if(this.form.locationNo && this.barCodeInfo.storehouseLocationNo !== this.form.locationNo){
							this.$modal.msg('该物料不在此库位中')
							return
							// this.$modal.confirm('该物料不在此库位中，是否确定添加？').then(() => {
							// 	this.setCode()
							// 	return
							// })
						}else{
							this.setCode()
							return
						}
					}else{
						this.$set(this,'barCode','')
						this.$set(this,'barCodeInfo',{})
					}
				})
			},
			// 获取库位信息
			// setLocationNo(event){
			// 	infoByLocationNo(event.detail.value).then(res=>{
			// 		if(res.code == 200){
			// 			if(res.data.status != "NORMAL"){
			// 				this.$modal.msg(`当前库位被锁定/冻结`);
			// 				this.storehouseLocationNo = ''
			// 				return
			// 			}
			// 			this.storehouseLocationNo = res.data.storehouseLocationNo
			// 			this.setCode()
			// 		}
			// 	})
			// },
			// 添加入库记录
			setCode(){
				// console.log('storehouseLocationNo'+this.storehouseLocationNo,'barCode'+this.barCode)
				// if(this.storehouseLocationNo && this.barCode){
					let isExists = false
					for(let i=0;i<this.tableList.length;i++){
						let item = this.tableList[i];
						if(item.barcode == this.barCode){
							isExists = true;
							this.$modal.msg(`已存在该条码数据，请直接更改数量`);
							return
						}
					}
					if(isExists) return;
					this.tableList.push({
						"barcode": this.barCode,
						"checkDetailNo": this.form.no,
						"quantity": this.barCodeInfo.qty,
						"qty": 0,
						"areaNo": this.form.areaNo,
						"checkNo": this.form.checkNo,
						"locationNo": this.form.locationNo,
						"productName": this.barCodeInfo.productName,
						"productNo": this.barCodeInfo.productNo,
						"productUnit": this.barCodeInfo.company,
						"storehouseNo": this.form.storehouseNo,
					})
					this.$set(this,'barCode','')
					this.$set(this,'barCodeInfo',{})
				// }
			},
			complete(){
				let isAllInput = true
				for(let i=0; i<this.tableList.length;i++){
					let item = this.tableList[i];
					if(!item.qty){
						isAllInput = false;
						this.$modal.msg(`盘点数量不能为空`);
						return;
					}
				}
				if(!isAllInput){ return }
				
				this.$modal.confirm('是否确认完成盘点').then(() => {
					checkResult({checkDetailNo: this.form.no},this.tableList).then(res=>{
						if(res.code==200){
							finish(this.form.id).then(res1=>{
								if(res1.code==200){
									this.$modal.msgSuccess("操作成功");
									uni.$emit('refreshList1')
									setTimeout(()=>{
										uni.navigateBack();
									}, 1000);
								} else {
									res1.msg && this.$modal.confirmClose(res1.msg)
								}
							})
						} else {
							res.msg && this.$modal.confirmClose(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped>
	
</style>